<template>
  <div>
    <el-tabs v-model="activeTab" class="gl_tabs" type="card">
      <el-tab-pane v-for="(item, index) in tabList" :key="index" :label="item.label" :name="item.name">
        <component
          :is="item.component"
          :page-data="pageData"
          :page-loading="pageLoading"
          :train-id="trainId"
          @changePageLoading="changePageLoading"
          @getPageList="getPageList"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import examination from './components/subjectTabExamination.vue';
import training from './components/subjectTabTraining.vue';

import {
  api_GET_TrainSubject // 获取科目列表
} from '@/extend/api/trainswaggerApi/app.js';

export default {
  data () {
    return {
      activeTab: 'training',
      tabList: [
        {
          label: '培训科目',
          name: 'training',
          component: training
        },
        {
          label: '考试科目',
          name: 'examination',
          component: examination
        }
      ],
      // 页面数据
      pageData: {},
      pageLoading: false,
      trainId: ''
    };
  },
  created() {
    this.trainId = this.$route.params.id;
    this.getPageList();
  },
  methods: {
    // 获取页面数据
    getPageList () {
      this.pageLoading = true;
      api_GET_TrainSubject({
        trainningId: this.trainId
      })
        .then(
          res => {
            this.pageLoading = false;
            this.pageData = res;
          }
        )
        .catch(
          error => {
            this.pageLoading = false;
            this.$message({
              message: `科目获取失败 ${error.error.message}`,
              type: 'error',
              showClose: true
            });
          }
        );
    },
    // 改变页面Loading状态
    changePageLoading (val) {
      this.pageLoading = val;
    }
  }
};
</script>
